<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控日志</title>
    <script type="text/javascript" type='module' charset="UTF-8" src="/js/collection.js"></script>
</head>
<body>
    <div id="app" class="bank">
      <vxe-grid v-bind="gridOptions" style="height:auto;">
        <template #toolbar_tools>
          <el-button @click="handleSearch">查询</el-button>
        </template>
        <template #toolbar_buttons>
            <el-input style="width: 250px" v-model="logParams.keyWords" placeholder="请输入机构编码或者机构名称"   clearable> 111</el-input>
            <el-select style="margin: 0 15px; width: 250px" placeholder="请选择">
                <el-option
                  v-for="item in logOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-date-picker style="width: 250px; margin-right: 15px;"
                v-model="logParams.startTime"
                type="date"
                format="YYYY-MM-DD"
                placeholder="请选择开始时间">
            </el-date-picker>
            <el-date-picker style="width: 250px" v-model="logParams.endTime"
              type="date"
              format="YYYY-MM-DD"
              placeholder="请选择结束时间"
              />
        </template>
      </vxe-grid>
    </div>
</body>
<script type="module">
  const { createApp, ref, reactive } = Vue
  createApp({
    setup() {
        const defaultParams = {
        keyWords: undefined,
        startTime: undefined,
        endTime: undefined
        }
        const logParams = reactive({
            ...defaultParams
        })
        const logOptions = ref([
        {
            label:'全部',
            value: 0
        },
        {
            label:'3001单位下发',
            value: 1
        },
        {
            label:'3002账户信息接收',
            value: 2
        },
        {
            label:'3003流水信息接收',
            value: 3
        },
        {
            label:'3004流水附件信息接收',
            value: 4
        }
        ])
      const gridOptions = reactive({
        border: true,
        align: null,
        height: 'auto',
        columnConfig: {
          resizable: true
        },
    toolbarConfig: {
          slots: {
            buttons: 'toolbar_buttons',
            tools: 'toolbar_tools'
          }
        },
             // 通用分页配置
	    pagerConfig: {
	  	layouts: ['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
		  border: true,
		  pageSize: 20,
		  pageSizes: [20, 50, 100, 200],
		  background: true,
        },
        rowConfig: {
         // 当鼠标移到行时，是否要高亮当前行
         isHover: true,
          // 当鼠标点击行时，是否要高亮当前行
		isCurrent: true
      },
        columns: [
          { type: 'seq', width: 50,   align: "center",fixed: "left",},
          { field: 'name', title: '机构编码', align: "center",width: 150 },
          { field: 'sex', title: '机构名称' , align: "center",width: 150 },
          { field: 'address', title: '接口报文编码', align: "center",width: 150  },
          { field: 'name', title: '响应状态', align: "center",width: 150  },
          { field: 'sex', title: '请求报文', align: "center",width: 150  },
          { field: 'address', title: '响应报文', align: "center",width: 150  },
          { field: 'address', title: '描述信息', align: "center",width: 150  },
          { field: 'address', title: '传送数据量', align: "center",width: 150 },
          { field: 'address', title: '请求时间', align: "center",width: 150  },
        ],
        data: [
          { id: 10001, name: 'Test1',  role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
        ]
      })
      // 搜索
     const handleSearch = ()=>{
    }
      return {
        logOptions,
        logParams,
        gridOptions,
        handleSearch,
      }
    }
  }).use(ElementPlus).use(VXETable).mount('#app')
</script>
<style>
  .bank {
    height: 100%;
  }
  .operation-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
</html>
